<template>
	<view class="device-status-list">
		<view class="nav flex-center-around" >
			<view
				:class="navActived === item.id ? 'nav-item nav-actived' : 'nav-item'"
				v-for="item in navList"
				:key="item.id"
				@click="toggleNav(item.id)">
				{{item.name}}
			</view>
		</view>
		<view class="list">
			<view v-if="deviceStatusList.length > 0">
				<view
					class="list-item"
					v-for="(item,index) in deviceStatusList"
					:key="index">
					<view class="list-item-main flex-center-between">
						<image class="list-item-main-img" :src="item.base.image" mode="aspectFill"></image>
						<view class="list-item-main-right">
							<view class="name-price-amount flex-center-between">
								<view class="name text-overflow-two">{{item.base.name}}</view>
								<view>
									<view class="price">¥{{item.base.total}}</view>
									<!-- <view class="amount">{{item.base.spec_name}}</view> -->
								</view>
							</view>
							<view class="type">序列号:{{item.base.number}}</view>
							<view class="daterange">租期:{{item.base.use_time}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
				无租机信息
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				navActived: 0,
				navList: [
					{
						name: '全部',
						id: 0,
					},
					{
						name: '即将到期',
						id: 1,
					},
					{
						name: '待归还',
						id: 2,
					},
					{
						name: '归还中',
						id: 3,
					},
					{
						name: '已完成',
						id: 4,
					}
				],
				deviceStatusList: [],
				
			}
		},
		onLoad() {
			this.gatDeviceList()
		},
		methods: {
			/**
			 * 获取设备列表数据
			 */
			async gatDeviceList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/renewal',
					data: {
						page: 1,
						row: 99,
						status: this.navActived
					}
				})
				if (res.status === 1) {
					this.deviceStatusList = res.data.list.map(item => {
						item.base.image = this.$baseUrl + item.base.image
						return item
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 切换导航栏
			 * @param {Number} id
			 */
			toggleNav(id) {
				// console.log(id)
				this.navActived = id
				this.gatDeviceList()
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.device-status-list{
		padding-top: 90rpx;
		.nav{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9;
			height: 90rpx;
			line-height: 90rpx;
			background: $uni-bg-color;
			border-bottom: 1rpx solid $uni-border-color;
			.nav-item{
				width: 150rpx;
				text-align: center;
			}
			.nav-actived{
				color: $uni-color-theme;
				border-bottom: 2rpx solid $uni-color-theme;
				animation: toggleNav 0.3s ease;
			}
		}
		.list{
			padding: 0 30rpx 30rpx;
			&-item{
				box-sizing: border-box;
				margin-top: 30rpx;
				padding: 30rpx;
				background: $uni-bg-color;
				border-radius: $uni-border-radius-base;
				&-top{
					.number{
						font-size: $uni-font-size-sm2;
						border-radius: $uni-border-radius-base;
					}
					.status{
						line-height: 36rpx;
						padding: 0 10rpx;
						color: $uni-text-color-inverse;
						font-size: $uni-font-size-sm1;
					}
					.status-1,
					.status-2,
					.status-3{
						background: #ff9c00;
					}
					.status-4{
						background: #00b5c4;
					}
				}
				&-main{
					margin: 20rpx 0;
					&-img{
						width: 200rpx;
						height: 200rpx;
					}
					&-right{
						width: 400rpx;
						.name-price-amount{
							margin-bottom: 30rpx;
							.name{
								width: 300rpx;
							}
							.price, .amount{
								font-size: $uni-font-size-sm2;
								color: $uni-text-color-grey;
								text-align: right;
							}
						}
						.type, .daterange{
							font-size: $uni-font-size-sm1;
						}
					}
				}
				&-bottom{
					text-align: right;
					.amount{
						margin-right: 54rpx;
					}
					
					.btn{
						display: inline-block;
						line-height: 56rpx;
						margin: 30rpx 0 0 20rpx;
						padding: 0 28rpx;
						border-radius: 28rpx;
						font-size: $uni-font-size-sm2;
						border: 1rpx solid $uni-border-color;
					}
				}
			}
		}
		
		@keyframes toggleNav {
			0% {
				transform: translateY(6rpx);
			}
			100% {
				transform: translateY(0%);
			}
		}
	}
</style>
